//三方工具-ca办理
<template>
    <div class="caDealWith">
        <div class="box-items">
            <div class="item" v-for="item2 in list" :key="item2.guid">
                <el-link :underline="false" @click="detail(item2)">
                    <div class="item-box">
                        {{item2.name}}
                    </div>
                </el-link>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import myItems from './myItems.vue';

export default {
    head: {},
    props: {},
    components: { myItems },
    data: () => ({
        list: [],
    }),
    computed: {
        ...mapGetters({
            navigateData: 'navigate/navigateData',
        }),
    },
    watch: {
        navigateData: {
            handler(n, o) {
                this.getData();
            },
            deep: true,
        },
    },
    methods: {
        getData() {
            // this.list = clone(this.navigateData.qtfwlist);
            this.list = clone(this.navigateData.blcalist.navis);
        },

        detail(item) {
            this.point(item);
            // 跳转
            window.open(item.url);
        },
        /**
         * 埋点
         */
        point(item) {
            this.$ajax({
                type: 'post',
                url: `${this.$store.state.api.tbUrl}/home/navigateclick.json`,
                data: {
                    type: item.type,
                    id: item.guid,
                    name: item.name,
                },
                callback: function (data, res) {},
                error: function () {},
            });
        },
    },
    mounted() {
        this.getData();
    },
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.caDealWith {
    .title {
        color: #3b68ff;
        margin: 5px 0 0;
        .imgp {
            height: 20px;
            min-width: 20px;
            max-width: 50px;
            margin-bottom: -4px;
        }
    }

    .box-items {
        display: flex;
        flex-wrap: wrap;
        .item {
            width: 84px;
            margin: 5px 10px 5px 0;
        }
        .item:nth-child(10n + 10) {
            margin-right: 0px;
        }
    }
}
</style>
 